<template>
	<view>
		<picker @change="choose_picker" :disabled='disabled' data-type="suborder" range-key="title" :range="picker">
			<view class="choose">
				<view class="left">
				 {{leftTitle}}
				</view>
				<view class="right">					
					<text >{{right_value?right_value:'请选择'}}</text>				
					<image v-show="!right_value"src="/static/images/right.png" mode=""></image>
					<icon v-show="right_value" class="icon"  type="clear" size="22upx"  @click.stop="disabled?'':deleteValue()"></icon>
				</view>
			</view>
		</picker>	
	</view>
</template>

<script>
	import sun from '@/utils/sun.js'
	export default {
		components: {

		},
		props: {
			name: '',//是什么picker
			value:'',
			leftTitle:{
				type:String,
				default:'名称'
			},//左边title
			rightValue:'',//右边值
			rightValueId:{
				type:Number|String
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				pickerList: {},
				picker:[],
				right_value:'',
			}
		},
		created() {
            this.getData()		
		},
		watch:{
			pickerList:{
				handler:function(newValue,oldValue){
					let _this = this	
				   	this.$watch('name', {
				   		handler: function(newValue, oldValue) {
				   			let _this = this					
				   			for (let key in _this.pickerList) {									
				   				if (key === _this.name) {									
				   	                _this.picker = _this.pickerList[newValue]		
								
				   				}
				   			}
				   		},
				   		deep: true,
				   		immediate: true
				   	})
					this.$watch('rightValue',{
						handler: function(newValue, oldValue) {
							let _this = this	
							if(newValue){
							 _this.right_value = newValue							
							}
						},
						deep: true,
						immediate: true
					},)
					this.$watch('rightValueId',{
						handler: function(newValue, oldValue) {
							let _this = this	
							if(newValue){
								_this.picker.forEach((item,index)=>{
									if(item.id == newValue){									
										_this.right_value =  item.title									
									}
								})
							}							
							
							
						},
						deep: true,
						immediate: true
					})
				
				    
				
				
				},
				deep:true,
				immediate: true 
			},
			
		},
		methods: {
			deleteValue(){
				this.right_value=''
				this.$emit('echoValue',{id:'',title:''})
			},
			choose_picker(e){
				let index = e.detail.value;
				this.right_value=this.picker[index].title;		
				this.$emit('echoValue',this.picker[index])
			},
			//获取查看信息
			getData() {
				let that = this			
				sun.request({
					url: '/h5/order.picker/index',
					showLoading: true,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							that.pickerList = res.data						
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="less">
	.choose{
		background: #FFFFFF;
		width: 100%;
		padding: 25upx 32upx;
		margin: 20upx 0 20upx 0;
		box-sizing: border-box;
		// border-bottom: 1upx solid #EEEEEE;
		font-size: 30upx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		.left{
			
		}
		.right{
			display:flex;
			align-items: center;
			text{
				font-size: 30upx;
				color: #999999;
				margin-right:20upx;
			}
			image{
				width: 40upx;
				height: 40upx;
				vertical-align: middle;
			}
		}
	}
</style>
